<template v-if="hasType1 || hasType2 || hasType3">
  <view class="containerer" v-if="hasType1 || hasType2 || hasType3">
    <!-- 图片轮播框类型 -->
    <template v-if="hasType3">
      <view class="ad-box">
        <view class="swiper-content">
          <swiper
            class="swiper-box"
            circular
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
          >
            <swiper-item
              v-for="(item, index) in itemArr3"
              :key="index"
              class="swiper-item"
            >
              <view class="swiper-item-box" @click="itemTarget(item)">
                <image class="swiper-img" mode="widthFix" :src="item.imageLinks" />
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </template>
    <!-- 单图片排列类型 -->
    <template v-if="hasType2">
      <view class="ad-box">
        <view class="swiper-content">
          <view
            class="swiper-item"
            v-for="(item, index) in itemArr2"
            :key="index"
            @click="itemTarget(item)"
          >
            <image class="swiper-img" mode="widthFix" :src="item.imageLinks" />
          </view>
        </view>
      </view>
    </template>
    <!-- 文字组合类型 -->
    <template v-if="hasType1">
      <view class="ad-box" v-for="(item, index) in itemArr1" :key="index">
        <view class="ad-content">
          <view class="ad-box-tips">
            <view class="tips-title">{{ item.name }}</view>
            <view class="tips-des">{{ item.des }}</view>
          </view>
          <view class="ad-btn" @click="itemTarget(item)">{{ item.remark }}</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { getMallListApi } from "@/http/api";
export default {
  name: "activity-box",
  props: {
    positionId: {
      type: Number,
      default: 101,
    },
  },
  data() {
    return {
      hasType1: false, // 类型1
      hasType2: false, // 类型2
      hasType3: false, // 类型3
      itemArr1: [], // 类型1
      itemArr2: [], // 类型2
      itemArr3: [], // 类型3
      indicatorDots: true,
      autoplay: true,
      interval: 2500,
      duration: 500,
    };
  },
  mounted() {
    // 获取ad信息
    getMallListApi({
      pageNum: 1,
      pageSize: 999,
      status: 1,
      projectId: 97,
      adPosition: this.positionId,
    }).then((res) => {
      if (res.code == 200 && res.rows.length > 0) {
        // 类型1活动
        let itemArr1 = res.rows.filter((e) => e.category == "0");
        let itemArr2 = res.rows.filter((e) => e.category == "1");
        let itemArr3 = res.rows.filter((e) => e.category == "2");
        if (itemArr1 && itemArr1.length != 0) {
          this.itemArr1 = itemArr1;
          this.hasType1 = true;
        }
        if (itemArr2 && itemArr2.length != 0) {
          this.itemArr2 = itemArr2;
          this.hasType2 = true;
        }
        if (itemArr3 && itemArr3.length != 0) {
          this.itemArr3 = itemArr3;
          this.hasType3 = true;
        }
      } else {
        this.hasType1 = false;
        this.hasType2 = false;
        this.hasType3 = false;
      }
    });
  },
  methods: {
    itemTarget(item) {
      if (item.skipLinks.trim()) {
        window.location.href = item.skipLinks;
      }
    },
  },
};
</script>

<style scoped>
.containerer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.ad-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20rpx 0;
  box-sizing: border-box;
}
.ad-content {
  width: 88%;
  padding: 20rpx 0;
  box-shadow: 0 0 10rpx #666;
  background-color: #c6a680;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ad-box-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ffffff;
}
.tips-title {
  font-size: 36rpx;
  line-height: 36rpx;
}
.tips-des {
  font-size: 28rpx;
  line-height: 32rpx;
}
.ad-btn {
  width: 240rpx;
  height: 50rpx;
  background-color: #ffffff;
  border-radius: 25rpx;
  color: #4b240d;
  font-weight: bold;
  text-align: center;
  margin-top: 15rpx;
  font-size: 28rpx;
  line-height: 46rpx;
}
.swiper-content {
  width: 690rpx;
  border-radius: 30rpx;
  .swiper-box {
    height: 260rpx;
    /*      ::v-deep .uni-swiper-slide-frame {
        height: fit-content!important;
      }
      ::v-deep .swiper-item {
        font-size: 20rpx;
        height: fit-content!important;
      }   */
  }
}
.swiper-img {
  width: 690rpx;
  height: 260rpx;
  border-radius: 20rpx;
}
</style>
